<template>
	<view>
		<ls-loading v-if="pageLoading" :text="text"></ls-loading>
		<view style="box-shadow:0px -1px 5px #333333 ">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: 100vh;">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
					<u-empty text="暂时没有订单哦~" mode="order" :show="orderlist.length==0" :color="color"></u-empty>
					<view class="item" v-for="i in orderlist?orderlist:[]">
						<view style="border-bottom: 1px solid #e1e1e1;display: flex;justify-content: space-between">
							<h4>{{i.type}}</h4>
							<h4>{{i.ordernumber}}</h4>
						</view>
						<view class="orderitem" v-for="j in i.dishlist">
							<view class="left">
								<view class="pic">
									<u-image :src="j.imgurl" width="100%" height="100%" @tap="godetail(item._id)" :border-radius="10" :fade="true">
										<u-loading slot="loading"></u-loading>
									</u-image>
									<!-- <image :src="j.imgurl" mode=""></image> -->
								</view>
								<view>{{j.name}}
									<view>{{j.type}}</view>
								</view>
							</view>
							<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
								<view>￥{{j.nowprice}}</view>
								<view>X{{j.count}}</view>
							</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<h6 v-if="!i.tablefee==0">桌位费:{{i.tablefee}}元</h6>
							<h6 v-if="i.tablefee==0" style="width: 10rpx;"></h6>
							<h4 style="text-align: right;">共{{i.dishlist.length}}件菜品，合计{{i.price}}元</h4>
						</view>
						<view v-show="i.status==4">
							<view style="width:100rpx;border: 1px solid #ffc847;margin-left: auto;border-radius: 5px;font-size: 12px;text-align: center;" @click="gocomment(i)">去评价</view>
						</view>
						<view v-show="i.status!=4">
							<view style="width:130rpx;border: 1px solid #ffc847;margin-left: auto;border-radius: 5px;font-size: 12px;text-align: center;padding: 5rpx;" @click="goorderstep(i)">查看进度</view>
						</view>
					</view>
					<u-divider color="#f1f1f1;" half-width="200" border-color="#434343" bg-color="#f1f1f1">没有更多了</u-divider>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				color:'#000000',
				text:'Loading...',
				pageLoading: true,
				show: true,
				orderlist: [],
				account: '',
				list: [{
						name: '待接单'
					}, {
						name: '进行中'
					}, {
						name: '待评价'
					},
					{
						name: '全部订单'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			};
		},
		created() {
			this.account = JSON.parse(uni.getStorageSync('currentUser')).account
		},
		onLoad(val) {
			this.swiperCurrent=val.key
		},
		onShow() {
			this.$u.post('/order/getAppOrder', {
				account: this.account,
				status: this.swiperCurrent
			}).then(res => {
				if (res.data.code == 200) {
					this.orderlist = res.data.order
					 this.pageLoading = false;
					this.show = false
				}
			})
		},
		mounted() {
			this.$refs.uTabs.setFinishCurrent(this.swiperCurrent);
			this.current = this.swiperCurrent;
			this.$u.post('/order/getAppOrder', {
				account: this.account,
				status: this.swiperCurrent
			}).then(res => {
				if (res.data.code == 200) {
					this.orderlist = res.data.order
					 this.pageLoading = false;
					this.show = false
				}
			})
			
		},
		methods: {
			goorderstep(item){
				uni.navigateTo({
					url: './orderstep?id='+item._id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			gocomment(item){
				uni.navigateTo({
					url: './comment?dishlist='+JSON.stringify(item.dishlist)+'&ordernumber='+item.ordernumber+'&id='+item._id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.$u.post('/order/getAppOrder', {
					account: this.account,
					status: index
				}).then(res => {
					console.log(res, 'dsds');
					if (res.data.code == 200) {
						this.orderlist = res.data.order
						 this.pageLoading = false;
						this.show = false
					}
				})

			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;

				this.$u.post('/order/getAppOrder', {
					account: this.account,
					status: current
				}).then(res => {
					console.log(res, 'dsds');
					if (res.data.code == 200) {
						this.orderlist = res.data.order
						this.show = false
						this.$refs.uTabs.setFinishCurrent(current);
						this.swiperCurrent = current;
						this.current = current;
					}
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #f1f1f1;
	}

	.pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 5px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.left {
		display: flex;
	}

	.orderitem {
		border: 1px solid #bfccc5;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		border-radius: 5px;
		padding: 10px;
		box-shadow: 0px -1px 2px #555555;
	}

	.item {
		padding: 10px;
		width: 90%;
		background: #FFFFFF;
		border-radius: 5px;
		margin-top: 40rpx;
		margin: 40rpx auto 0 auto;
	}

	.swiper-item {
		height: 100vh;
	}
</style>
